<template>
  <div class="data-lineage-tool-bar">
    <a-tooltip
      v-for="tool in useTools"
      :key="tool.key"
      :title="tool.name"
      :destroy-tooltip-on-hide="true"
      placement="left"
    >
      <div class="tool-item" @click="toolHandler(tool)">
        <a-icon-font :type="tool.icon" />
      </div>
    </a-tooltip>
  </div>
</template>

<script lang="ts">
/**
 * 数据血缘 toolbar
 */
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { Tool } from '../x6-data-lineage/interface'

const graphTools: Array<Tool> = [
  {
    name: '放大',
    icon: 'icon-a-fangda2',
    key: 'ZOOM_IN',
  },
  {
    name: '缩小',
    icon: 'icon-suoxiao',
    key: 'ZOOM_OUT',
  },
  {
    name: '适应视口',
    icon: 'icon-fit-view',
    key: 'FIT_VIEW',
  },
  {
    name: '居中',
    icon: 'icon-fit-center',
    key: 'FIT_CENTER',
  },
  {
    name: '初始化',
    icon: 'icon-huifu',
    key: 'INIT',
  },
]

@Component({
  name: 'ToolBar',
  components: {},
})
export default class ToolBar extends Vue {
  @Prop({ type: Array }) tools!: string[]

  private allTools: Array<Tool> = graphTools

  private get useTools() {
    if (!this.tools) {
      return this.allTools
    }
    return this.allTools.filter((tool: Tool) => {
      return this.tools.includes(tool.key)
    })
  }

  @Emit('action')
  private toolHandler(tool: Tool) {
    return tool
  }
}
</script>

<style lang="less" scoped>
@import '../../styles/constants.less';

.data-lineage-tool-bar {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 4px 0 #e9e9e9;

  .tool-item {
    cursor: pointer;
    font-size: 24px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    width: 36px;

    &:hover {
      background: @BRAND_COLOR_GAMUT2;
    }
  }
}
</style>
